<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            quick-search-placeholder="根据分类名称模糊查询" />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table />
        <detailDialog />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { useI18n } from 'vue-i18n'
import detailDialog from './detail.vue'
import { baTableApi } from '/@/api/common'
import baTableClass from '/@/utils/baTable'
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
import { paymentWithdrawal, withdrawalDetail } from '/@/api/backend'
defineOptions({
    name: 'withdrawal/index',
})
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'audit',
        title: 'audit',
        text: '',
        type: 'success',
        icon: 'fa fa-gavel',
        class: 'table-row-info',
        disabledTip: false,
        click: (row: TableRow) => {
            detailButtonClick(row[baTable.table.pk!]) //审核按钮
        },
        display(row: TableRow) {
            if (row.status == 1) {
                return true
            } else {
                return false
            }
        }
    },
    {
        render: 'tipButton',
        name: 'cny',
        title: 'cny',
        text: '',
        type: 'success',
        icon: 'fa fa-cny',
        class: 'table-row-info',
        disabledTip: false,
        click: (row: TableRow) => {
            cnyButtonClick(row[baTable.table.pk!]) //审核按钮
        },
        display(row: TableRow) {
            if (row.status == 2) {
                return true
            } else {
                return false
            }
        }
    },
    {
        render: 'tipButton',
        name: 'detail',
        title: 'Detail',
        text: '',
        type: 'success',
        icon: 'fa fa-delicious',
        class: 'table-row-info',
        disabledTip: false,
        click: (row: TableRow) => {
            detailButtonClick(row[baTable.table.pk!]) //审核按钮
        },
        display(row: TableRow) {
            if (row.status == 5) {
                return true
            } else {
                return false
            }
        }
    },
]
const { t } = useI18n()
const tableRef = ref()
const baTable = new baTableClass(
    new baTableApi('/admin/v1/user/withdrawal/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: '申请人', prop: 'user.nickname', align: 'center', operator: false, },
            { label: '提现银行', prop: 'user_bank_title', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入名称' },
            { label: '提现账号', prop: 'bank_card_number', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入名称' },
            { label: '提现金额', prop: 'withdrawal_money', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入名称' },
            {
                label: '状态',
                prop: 'status',
                align: 'center',
                render: 'tag',
                custom: { '1': 'danger', '2': 'success', '3': 'info', '4': 'warning','5':'success' },
                replaceValue: { '1': '待审核', '2': '已审核', '3': '取消申请', '4': '审核失败' , '5': '已完成'},
            },
            {
                label: '是否打款',
                prop: 'payment_status',
                align: 'center',
                render: 'tag',
                custom: { '1': 'danger', '2': 'success' },
                replaceValue: { '1': '未打款', '2': '已打款' },
            },
            {
                label: '创建时间',
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: false,
            },
            { label: t('Operate'), align: 'center', render: 'buttons', operator: false, buttons: optButtons }
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {
            type: 'home',
            status: '1',
            weigh: 0,
        },
    }
)

//详情并审核按钮
const detailButtonClick = (id: string) => {
    baTable.form.extend!['detail'] = {}
    baTable.form.operate = 'Detail'
    baTable.form.loading = true
    withdrawalDetail(id).then((res: any) => {
        baTable.form.extend!['detail'] = res.data.row
        baTable.form.loading = false
    })
}

//打款按钮

const cnyButtonClick = (id: string) => {
    ElMessageBox.confirm(
        '再次确认已经给用户打款了吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            showClose: false,
            closeOnClickModal: false, //是否可通过点击遮罩关闭
            closeOnPressEscape: false
        }
    ).then(() => {
        paymentWithdrawal({ id: id }).then((res: any) => {
            baTable.onTableHeaderAction('refresh', {})
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
        })
    })


}

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss"></style>
